<!DOCTYPE html>
<html>
<head>
  <title> </title>
</head>
<body>
<style>
  /* 在此处声明过渡样式类，从一个状态过渡到另一个状态 */
  .v-enter,
  .v-leave-to {
    opacity: 0;
  }
  .v-enter-active,
  .v-leave-active {
    transition-property: opacity; /* 过渡属性 */
    transition-delay: 100ms;  /* 延迟 */
    transition-duration: 900ms; /* 过渡时长 */
    transition-timing-function: linear; /* 贝塞尔曲线（动画速度曲线） */
  }
  .rotate-enter,
  .rotate-leave-to {
    transform: rotateY(90deg);
  }
  .rotate-enter-active,
  .rotate-leave-active {
    transform-origin: left;
    transition: transform 1s linear;
  }
</style>
<div id="app">
  <button @click="isHidden = !isHidden">
    {{ isHidden ? '显示' : '隐藏' }}
  </button>
  <!-- 默认前缀的过渡 -->
  <transition>
    <p v-if="!isHidden">使用默认前缀的过渡</p>
  </transition>
  <!-- 自定义前缀的过渡，transitionName为变量 -->
  <transition :name="transtionName">
    <p v-if="!isHidden">使用rotate前缀的过渡</p>
  </transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  // 声明 Vue 实例
  let vm = new Vue({
    el: '#app',
    data () {
      return {
        isHidden: true,
        transtionName: 'rotate' // 如果在运行时，将transitionName改为v会怎样？

      }
    }
  })
</script>
</body>
</html>